// 进油信息填写
<template>
  <div class="oilInlet-container">
    <van-nav-bar
      class="app-nav-bar"
      title="进油信息"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs v-model="active">
      <van-tab title="此次进油">
        <van-form class="form-box" @submit="onAddOilInfo">
          <van-field
            readonly
            clickable
            name="calendar"
            :value="oilInletForm.oil_inlet_date"
            label="进油日期"
            placeholder="点击选择进油日期"
            :rules="[{ required: true, message: '请填写进油日期' }]"
            @click="showCalendar = true"
          />
          <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            v-model="showCalendar"
            @confirm="onConfirm"
          />
          <van-field
            v-model="oilInletForm.oil_inlet_price"
            type="number"
            name="进油单价"
            label="进油单价"
            placeholder="请填写进油单价"
            :rules="[{ required: true, message: '请填写进油单价' }]"
          />
          <van-field
            v-model="oilInletForm.total_oil"
            type="number"
            name="进油总量"
            label="进油总量"
            placeholder="请填写进油总量"
            :rules="[{ required: true, message: '请填写进油总量' }]"
          />
          <van-field
            v-model="autoCost"
            readonly
            name="进油成本"
            label="进油成本"
            placeholder="填写完成自动计算"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="历史进油">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <el-table :data="list" border style="width: auto">
              <el-table-column prop="oil_inlet_date" label="日期">
                <template slot-scope="scope">
                  <!-- 加上点击事件 -->
                  <span
                    style="cursor: pointer; color: rgb(64, 158, 255)"
                    @click="gotoInfo(scope)"
                    >{{ scope.row[scope.column.property] }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="oil_inlet_price" label="单价">
              </el-table-column>
              <el-table-column prop="total_oil" label="升数"> </el-table-column>
              <el-table-column prop="cost" label="成本"> </el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <el-button
                  type="primary" icon="el-icon-edit" circle
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"></el-button>
                  <el-button
                  round
                    size="mini"
                    type="danger" icon="el-icon-delete" circle
                    @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </van-list>
        </van-pull-refresh>
        <van-dialog v-model="show" title="售油去向" show-cancel-button>
          <el-table show-summary :data="gotoList" border>
            <el-table-column prop="oil_sale_date" label="加油日期">
            </el-table-column>
            <el-table-column prop="car_number" label="车牌号" width="90px">
            </el-table-column>
            <el-table-column prop="oiling_quantity" label="加油量" width="70px"> </el-table-column>
            <el-table-column prop="profit" label="盈利"> </el-table-column>
          </el-table>
        </van-dialog>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { addOilInfo, getOilInfo, destroy } from '@/api/oilInlet'
import { getOilSaleInfo } from '@/api/oilSale'
export default {
  name: 'oilInletIndex',
  components: {},
  props: {},
  data () {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2035, 0, 31),
      oilInletForm: {
        oil_inlet_date: '',
        time_stamp: null,
        oil_inlet_price: null,
        total_oil: null,
        cost: null
      },
      active: 0,
      showCalendar: false,
      list: [],
      gotoList: [],
      loading: false,
      finished: false,
      refreshing: false,
      show: false
    }
  },
  computed: {
    autoCost: {
      // 计算成本
      set: function (v) {
        this.oilInletForm.cost = v
      },
      get: function () {
        return parseFloat(
          this.oilInletForm.oil_inlet_price * this.oilInletForm.total_oil
        ).toFixed(2) === '0.00'
          ? null
          : parseFloat(
            this.oilInletForm.oil_inlet_price * this.oilInletForm.total_oil
          ).toFixed(2)
      }
    }
  },
  watch: {},
  created () {},
  mounted () {
    // this.getInfo()
  },
  methods: {
    onAddOilInfo (values) {
      console.log('submit', values)
      this.oilInletForm.cost = this.autoCost
      this.$toast.loading({
        message: '提交中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长ms 值为0时 toast不会消失
      })
      addOilInfo(this.oilInletForm)
        .then((res) => {
          // console.log('login res', res)
          if (res.data.errno === 1000) {
            this.$toast.success('提交成功')
            // this.$router.push('/oilEnter')
            setTimeout(() => {
              window.location.reload()
            }, 1000)
          }
        })
        .catch((err) => {
          console.log('addOilInfo err', err)
          this.$toast.fail('提交失败')
        })
    },
    getInfo () {
      getOilInfo()
        .then((res) => {
          if (this.refreshing) {
            this.list = []
            this.refreshing = false
          }
          console.log('进油信息', res)
          for (let i = 0; i < res.data.data.length; i++) {
            this.list.push(res.data.data[i])
          }
          this.finished = true
        })
        .catch((err) => {
          console.log('getOilInfo err', err)
        })
    },
    onConfirm (date) {
      console.log('日期', new Date(date))
      console.log('时间戳', new Date(date).getTime())
      this.oilInletForm.oil_inlet_date = `${date.getYear() + 1900}/${
        date.getMonth() + 1
      }/${date.getDate()}`
      this.oilInletForm.time_stamp = new Date(date).getTime()
      this.showCalendar = false
    },
    onLoad () {
      this.getInfo()
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    gotoInfo (scope) {
      this.gotoList = []
      // console.log(scope.$index)
      // console.log(this.list[this.list.length - scope.$index - 1]._id)
      this.show = true
      getOilSaleInfo({
        oil_inlet_id: this.list[this.list.length - scope.$index - 1]._id
      }).then(res => {
        console.log(res)
        for (let i = 0; i < res.data.data.length; i++) {
          this.gotoList.push(res.data.data[i])
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$dialog.confirm({
        title: '警告',
        message: '确认要删除吗'
      })
        .then(() => {
          // on confirm
          destroy({
            id: row._id
          }).then(res => {
            console.log('res', res)
            this.$toast.success('删除成功')
            setTimeout(() => {
              window.location.reload()
            }, 1000)
            // this.$router.push('/oilEnter')
          }).catch(err => {
            console.log('err', err)
            this.$toast.fail('删除失败')
            // this.$router.push('/oilEnter')
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss">
.form-box {
  padding: 0 10px;
}
.van-field {
  border-radius: 10px;
  margin: 16px 0;
  // background-color: rgba(102, 137, 253, 0.9);
  // height: 45px;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}

.van-cell__label {
  margin-top: 0.10667rem;
  color: rgb(78, 61, 61);
  font-size: 16px;
  line-height: 0.48rem;
}
</style>
